    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>跟随tools相关配套的案例</title>
        <style>
            li{
                height: 100px;
                width: 100px;
                background-color: #ffa8e7;
                list-style: none;
                margin: 10px ;
            }
        </style>

    </head>
    <body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li id="box"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- <script src="tools.js"></script> -->
    <script>
//     var box=document.getElementById("box");
//     box.style.backgroundColor="#66ff49";
        var box=getEle("box");
        box.style.backgroundColor="#000";


    //将首位两个li变成紫色
     var parent=box.parentNode;
     getFirstNode(parent).style.backgroundColor="#1314ff";
     getLastNode(parent).style.backgroundColor="#1314ff";


         /**查找第一个子节点
     * Created by Administrator on 2018/8/14.
     */
    function getFirstNode(ele){
        var fisrt=ele.firstElementChild||ele.firstChild;
        return first;
    }
    /**查找最后一个子节点
     * Created by Administrator on 2018/8/14.
     */
    function getLastNode(ele){
        return ele.lastElementChild||ele.lastChild;
    }
    /**查找下一个兄弟节点
     * Created by Administrator on 2018/8/14.
     */
    function getNextNode(ele){
        return ele.nextElementSibling||ele.nextSibling;
    }

    /**
     * 查找上一个兄弟节点
     * @param ele
     * @returns {Element|*|Node}
     */
    function getPreviousNode(ele){
        return ele.previousElementSibling||ele.previousSibling;
    }

    /**
     *给定元素并查找它的所有兄弟的索引值
     * @param ele
     * @param index
     * @returns {*}
     */
    function getIndexOfNode(ele,index){
        return ele.parentNode.childNodes[index];
    }

    /**
     * 将一个元素的所用兄弟节点全部获取
     * @param ele
     * @returns {Array}
     */
    function getAllSiblings(ele) {

        var newArr=[];
        var arr=ele.parentNode.childNodes;
        for(var i=0;i<arr.length;i++){
            if(arr[i]!=newArr){
               // arr[i]=newArr;
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    /**
     *
     * @param id
     * @returns {Element}
     */
      function getEle(id) {
          return document.getElementById(id);

    }

//
    </script>
    </body>
    </html>